<template>
    <div class="index-container">
        <el-container>
            <el-header>
            </el-header>
            <el-main>
                <div class="desc-div">
                    <h2 align="center">商品详情</h2>
                    <div class="goodsDesc">
                        <div class="baseInfo">
                            <div class="photo">
                                <el-image :src="require('@/assets/images/books/' + book.book_image)">
                                    <div slot="placeholder" class="image-slot">
                                        加载中<span class="dot">...</span>
                                    </div>
                                </el-image>
                            </div>
                            <div class="bookInfo">
                                <p>书名:{{ book.book_name }}</p>
                                <p>价格:{{ book.book_price }}</p>
                            </div>
                        </div>
                        <div class="bookDesc">
                            <p>图书详情:</p>
                            {{ book.book_desc }}
                        </div>
                        <div class="book-comment">
                            <p>图书评论</p>

                            <!-- v-for="comment in commentList" :key="comment.comment_id" -->
                            <div class="comment-info" v-for="comment in commentList" :key="comment.comment_id">
                                <div class="comment-base-info">
                                    <label style="display:inline-block;width:70%">评论人:{{ comment.user_name }}</label>
                                    <label style="margin-right:20px">评论时间:{{ comment.comment_time }}</label>
                                </div>
                                <div class="comment-content">
                                    {{ comment.comment_message }}
                                </div>
                            </div>

                            <div class="comment-info" v-if="commentList.length == 0">

                                <div class="comment-content">
                                    暂无评论
                                </div>
                            </div>

                            <div class="pagination">
                                <el-pagination background :page-size="pageParam.pageSize"
                                    :current-page.sync="pageParam.pageNum" layout="prev, pager, next,jumper,total"
                                    :total="total" @current-change="queryCommentByBookId(book.book_id)">
                                </el-pagination>
                            </div>

                        </div>
                    </div>
                </div>
            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            book: {},//图书对象
            commentList: [],//图书评论数组
            /**
             * 分页参数
             */
            pageParam: {
                pageSize: 2,//每页显示的行数
                pageNum: 1//设置当前页
            },
            total: 0,//总行数
            // pageSizes: [5, 15, 20]//设置每页显示行数列表的值
        }
    },
    methods: {
        queryBookById(book_id) {
            this.$axios
                .get('book/queryBookById?book_id=' + book_id)
                .then(response => {
                    this.book = response.data;
                })
                .catch(error => {
                    alert(error);
                });
        },
        /**
         * 根据图书编号获得该图书的所有评论信息
         */
        queryCommentByBookId(book_id) {
            this.pageParam.book_id = book_id;//向对象中添加了一个属性
            this.$axios
                .get('book/queryCommentById', {
                    params: this.pageParam
                })
                .then(response => {
                    let map = response.data;
                    this.total = map.total;//获得总记录数
                    this.commentList = map.commentList;//获得查询的具体数据
                })
                .catch(error => {
                    alert(error);
                })
        }

    },
    created() {
        //获得Index.vue传入的查询参数
        let book_id = this.$route.query.book_id;
        this.queryBookById(book_id);
        this.queryCommentByBookId(book_id);

    }
}
</script>
<style scoped>
.el-header,
.el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-header {
    display: flex;
}

.el-header .index-logo,
.el-header .index-personal {
    width: 50%
}

.el-main {
    background-color: #fff;
    color: #333;
}



.desc-div {
    width: 100%;
    border: 0px solid red;
}

.goodsDesc {

    width: 80%;
    margin: 0 auto;
    border: 1px solid blue;

}

.baseInfo {
    display: flex;
}

.baseInfo .photo {
    width: 50%;
    text-align: center;
    margin-bottom: 10px;
}

.bookDesc>p {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    box-sizing: border-box;
    color: #fff;
    background-color: darkgray;

}


.book-comment>p {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    box-sizing: border-box;
    color: #fff;
    background-color: darkgray;
    margin-bottom: 0px;
}

.comment-base-info {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    box-sizing: border-box;
    color: #fff;
    background-color: yellowgreen
}

.comment-content {
    padding: 15px 10px;
}
</style>